//收款二维码
'use strict'
import React, { Component } from 'react';
import {
  View,
  Text,
  Image,
  TouchableOpacity,
  StyleSheet,
  CameraRoll,
} from 'react-native';
import * as defaultStyles from '../constants/DefaultStyles';
import NavigatorBar from '../components/NavigatorBar';
import { Actions } from 'react-native-router-flux';
// import {QRCode} from 'react-native-qr-barcode';
import {takeSnapshot} from 'react-native-view-shot';
import QRCode from 'react-native-qrcode-svg';


export default class ReceiptQRCodeContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      QRCodeValue: `http://www.dldhcwx.com/icmp-ums/page/phone/phonepage.html?merId=${merid}`,
      money: '0',
    };
  }
  _imageAndTitle(titles) {
    let compArr = [];
    let imageArr = {
      '微信支付': require('../imgs/wechat.png'),
      '支付宝': require('../imgs/alipay.png')
    }
    for (let i = 0; i < titles.length; i++) {
      let title = titles[i];
      let canvas =
      compArr.push(
        <View style={{alignItems: 'center', marginLeft: 10, marginRight: 10}}>
          <Image source={imageArr[title]} style={{width: 40, height: 40, marginTop: 10}}/>
          <View style={{alignItems: 'center', justifyContent: 'center'}}>
            <Text style={{fontSize: 12}}>{title}</Text>
          </View>
        </View>
      )
    }
    return compArr;
  }
  _takeSnapshot() {
    takeSnapshot(this.refs.qrView, {format: "png", result: "file"})
      .then(res =>  {
          CameraRoll.saveToCameraRoll(res, 'photo').then(alert('保存成功'));
          console.log(res);
        }
       )
      .catch(error => (console.warn(error)));
  }
  _updateMoney(money) {
    try{
      let value = parseFloat(money);
      this.setState({moneyText: value, money: String(value * 100)});
    }
    catch (e) {
      alert('输入金额格式不合法')
    }
  }
  render() {
    let QRValue = this.state.money === '0' ? this.state.QRCodeValue : this.state.QRCodeValue + '&money=' + this.state.money;
    return (
      <View style={styles.container}>
        <NavigatorBar leftImage={'angle-left'} rightText="设置金额"
                      navBarColor={defaultStyles.LIGHTBLUE} title="收款二维码"
                      leftClick={() => Actions.pop()} rightClick={() => Actions.inputMoney({inputMoney: (money) => this._updateMoney(money)})}/>
        <View style={styles.topSubContainer} ref="qrView" collapsable={false}>
          <View style={styles.topSubNote}>
            <Text>收款二维码，可打印粘贴在门店中</Text>
          </View>
          <View style={styles.topSubQRCode}>
            <View style={{flex: 1.2, alignItems: 'center', justifyContent: 'center'}}>
              <Text style={{fontSize: 30, fontWeight: 'bold'}}>扫一扫付款</Text>
              <Text style={{fontSize: 17, fontWeight: 'bold'}}>{this.state.money === '0' ? '' : '￥' + this.state.moneyText}</Text>
            </View>
            <View style={{flex: 3, justifyContent: 'center', alignItems: 'center'}} >
              {/*<QRCode*/}
                {/*value={QRValue}*/}
                {/*size={210}*/}
                {/*bgColor='black'*/}
                {/*fgColor='white'*/}
              {/*/>*/}
              <QRCode
                 value={QRValue}
                 size={210}
              />
            </View>
            <View style={{flex: 0.5, flexDirection: 'column-reverse', paddingBottom: 10, borderBottomWidth: 1, borderBottomColor: '#F4F4F4'}}>
              <Text style={{fontSize: 16, textAlign: 'center'}}> 【东华软件（大连）】</Text>
            </View>
            <View style={{flex: 1, justifyContent: 'center', flexDirection: 'row'}}>
              {this._imageAndTitle(['支付宝', '微信支付'])}
            </View>
          </View>
        </View>
        <View style={styles.bottomSubContainer}>
          <TouchableOpacity style={{marginTop: 10, backgroundColor: defaultStyles.LIGHTBLUE, height: 40, justifyContent: 'center', alignItems: 'center'}}
                            onPress={() => this._takeSnapshot()}>
            <Text style={{color: 'white'}}>保存到相册</Text>
          </TouchableOpacity>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: defaultStyles.WHITEOFBACKGROUND,
  },
  topSubContainer: {
    flex: 13,
    paddingLeft: 25,
    paddingRight: 25,
  },
  bottomSubContainer: {
    flex: 2,
    paddingLeft: 22,
    paddingRight: 22,
  },
  topSubNote: {
    flex: 1,
    flexDirection: 'column-reverse',
    alignItems: 'center',
    paddingBottom: 5,
  },
  topSubQRCode: {
    flex: 11,
    backgroundColor: 'white',
    borderRadius: 10,
  }
});